<template>
  <!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
  <div :id="chartId" style="width: 100%;height:100%;"></div>
</template>

<script setup>
import {useId} from 'vue'
import VChart from '@visactor/vchart'
defineOptions({ name: 'dynamicLine' })
const func=(x)=>{
  x /= 20;
  return Math.cos(x + 1) * Math.sin(x + 1) * 50;
}
const generateData = (i) =>{
  return {
    name: +now + minute * i,
    value: func(i)
  };
}
let now = new Date(2023, 5, 16);
const minute = 60 * 1000;
const data = [];
let i = 0;
for (; i < 1000; i++) {
  data.push(generateData(i));
}
const duration = 100;
const spec = {
  type: 'line',
  background:'transparent',
  data: {
    id: 'id0',
    values: data
  },
  xField: 'name',
  yField: 'value',
  line: {
    style: {
      lineWidth: 2
    }
  },
  point: {
    visible: false
  },
  animationAppear: {
    line: {
      duration
    }
  },
  // FIXME: 字符串改为数字（目前会报错）
  markLine: [
    {
      y: '0', // FIXME: 字符串改为数字（目前会报错）
      line: {
        style: {
          lineDash: [0]
        }
      },
      endSymbol: {
        visible: false
      }
    }
  ],
  axes: [
    {
      orient: 'left',
      type: 'linear',
      visible: true,
      min: -50,
      max: 50,
      grid: {
        style: {
          lineDash: [0]
        }
      },
      label: {
        visible: true
      },
      animation: false
    },
    {
      orient: 'bottom',
      type: 'time',
      animation: true,
      nice: false,
      layers: [
        // 双层轴每层的配置
        {
          timeFormat: '%m-%d '
        },
        {
          timeFormat: '%H:%M'
        }
      ],
      label: {
        visible: true
      }
    }
  ]
};
const chartId=useId()
onMounted( () => {
// 创建 vchart 实例
  const vchart = new VChart(spec, { dom: chartId })
// 绘制
  vchart.renderSync()
  setInterval(function () {
    for (let j = 0; j < 5; j++) {
      data.shift();
      data.push(generateData(++i));
    }
    vchart.updateData('id0', data);
  }, duration);
})
</script>

<style scoped>

</style>
